<template>
  <el-dialog
    title="评论下载"
    width="50%"
    top="13vh"
    :visible.sync="dialogVisible"
    :before-close="closeHandle"
    :close-on-click-modal="false">
    <el-form :model="commentForm" ref="commentForm" label-width="85px"
             @keyup.enter.native="downloadBlogCommentHandle" @keyup.esc.native="closeHandle">
      <el-form-item label="字段选择" prop="fields">
        <el-checkbox-group v-model="commentForm.fields" @change="exportFieldChangeHandle">
          <el-checkbox v-for="(field, index) in fieldList" :label="field" :key="index" class="mr20">{{ field.text }}</el-checkbox>
        </el-checkbox-group>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="checkAllChangeHandle">全选</el-checkbox>
      </el-form-item>
      <el-form-item label="导出方式" prop="downloadMode">
        <el-radio-group v-model="commentForm.downloadMode">
          <el-radio :label="0">异步</el-radio>
          <el-radio :label="1">同步</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="文件类型" prop="fileType">
        <el-radio-group v-model="commentForm.fileType">
          <el-radio :label="0">xlsx</el-radio>
          <el-radio :label="1">csv</el-radio>
          <el-radio :label="2">xls</el-radio>
          <el-radio :label="3">txt</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="数据大小" prop="dataType">
        <el-radio-group v-model="commentForm.dataType" @change="dataTypeChangeHandle">
          <el-radio :label="0">当前页数据</el-radio>
          <el-radio :label="1">全部数据</el-radio>
          <el-radio :label="2">自选导出</el-radio>
        </el-radio-group>
        <transition name="el-zoom-in-top">
          <div v-show="commentForm.dataType === 2" class="mt10">
            <span>页码</span>
            <el-input v-model.number="searchBlogCommentForm.page" size="mini" maxlength="9" placeholder="请输入页码" class="w15"
              @blur="checkInputValueHandle('page', '请输入正确的页码')"></el-input>
            <span class="ml10">页大小</span>
            <el-input v-model.number="searchBlogCommentForm.limit" size="mini" maxlength="6" placeholder="请输入页大小" class="w15"
              @blur="checkInputValueHandle('limit', '请输入正确的页大小')"></el-input>
            <span class="fz13 ml7" style="color: #ccc">总数: {{ blogCommentSize }}</span>
            <transition name="el-fade-in-linear">
              <span  v-show="!!errorMessage" class="fz13 ml10" >提示: {{ errorMessage }}</span>
            </transition>
          </div>
        </transition>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeHandle">关闭</el-button>
      <el-button type="primary" @click="downloadBlogCommentHandle">导出</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {Notification} from "element-ui";

  /**
   * 系统菜单添加或修改插件
   */
  export default {
    name: "comment-info",
    props: {
      // 弹出框是否显示
      dialogVisible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        // 博客评论导出表单对象
        commentForm: {
          // 导出的字段列表
          fields: [],
          // 数据导出模式[0-异步 1-同步]
          downloadMode: 0,
          // 导出的文件类型[0-xlsx 1-csv 2-xls 3-txt]
          fileType: 0,
          // 导出的数据类型[0-当前页数据 1-全部数据 2-自选数据页]
          dataType: 0,
          // 查询参数（json数据格式）
          params: undefined,
        },
        // 博客评论检索表单对象
        searchBlogCommentForm: {
          blogId: '',
          // 检索的评论内容（模糊检索）
          word: '',
          // 评论区块id（全值匹配）
          blockId: '',
          // 是否查询一级评论[0-是]
          parentUserId: '',
          // 评论是否被删除[0-正常 1-删除]
          deleteFlag: '',
          // 评论是否被被隐藏[0-正常 1-隐藏]
          hideFlag: '',
          // 作者是否点赞[0-点赞 1-正常]
          authorLike: '',
          // 评论是否置顶[0-置顶 1-正常]
          topFlag: '',
          // 博客列表分页页码
          page: 1,
          // 博客列表每页大小
          limit: 10,
          // 排序字段
          field: 'createTime',
          // 排序方式
          order: 'ascending'
        },
        // 当前博客评论总数
        blogCommentSize: 0,
        // 缓存当前页的页码
        cachePage: undefined,
        // 缓存当前页大小
        cacheLimit: undefined,
        // 博客评论可选字段列表
        fieldList: [
          {
            text: '评论内容',
            value: 'content',
            sort: 0,
          },
          {
            text: '评论用户',
            value: 'userName',
            sort: 1,
          },
          {
            text: '评论区块',
            value: 'blockId',
            sort: 2,
          },
          {
            text: '评论类型',
            value: 'oneCommentFlag',
            sort: 3,
          },
          {
            text: '点赞数',
            value: 'likeNum',
            sort: 4,
          },
          {
            text: '回复数',
            value: 'replyNum',
            sort: 5,
          },
          {
            text: '作者点赞',
            value: 'authorLike',
            sort: 6,
          },
          {
            text: '置顶状态',
            value: 'topFlag',
            sort: 7,
          },
          {
            text: '隐藏状态',
            value: 'hideFlag',
            sort: 8,
          },
          {
            text: '删除状态',
            value: 'deleteFlag',
            sort: 9,
          },
          {
            text: '评论时间',
            value: 'createTime',
            sort: 10,
          },
          {
            text: '备注',
            value: 'remark',
            sort: 11,
          },
        ],
        // 博客评论导出字段是否全选[true-全选 false-非全选]
        checkAll: true,
        // 博客评论导出字段列表不确定状态[true-不确定状态 false-确定状态（全选/没有选中）]
        isIndeterminate: false,
        // 数据分页错误提示消息
        errorMessage: undefined,
      }
    },
    methods: {
      /**
       * 初始化博客评论导出弹出框
       * @param {Object} searchBlogCommentForm 博客评论检索表单对象
       * @param {number} commentSize           博客评论总数
       */
      initDownloadCommentDialog(searchBlogCommentForm, commentSize) {
        this.commentForm.fields = this.fieldList

        let thisSearchBlogCommentForm = this.searchBlogCommentForm
        for (let key in searchBlogCommentForm) {
          thisSearchBlogCommentForm[key] = searchBlogCommentForm[key];
        }

        this.blogCommentSize = commentSize

        this.cachePage = searchBlogCommentForm.page
        this.cacheLimit = searchBlogCommentForm.limit
      },
      /**
       * 博客评论导出字段列表项选择事件
       */
      exportFieldChangeHandle() {
        // 获取当前选择的导出博客评论字段大小
        let checkFieldLength = this.commentForm.fields.length
        // 获取博客评论可选字段列表长度
        let fieldListSize = this.fieldList.length
        this.checkAll = checkFieldLength === fieldListSize
        this.isIndeterminate = checkFieldLength > 0 && checkFieldLength < fieldListSize;
      },
      /**
       * 博客评论导出字段列表‘全选’多选框选择时间
       * @param {boolean} value 最新值
       */
      checkAllChangeHandle(value) {
        this.commentForm.fields = value ? this.fieldList : []
        this.isIndeterminate = false
      },
      /**
       * 导出的数据大小切换事件
       */
      dataTypeChangeHandle() {
        let dataType = this.commentForm.dataType
        let searchBlogCommentForm = this.searchBlogCommentForm
        if (dataType === 0) {
          searchBlogCommentForm.page = this.cachePage
          searchBlogCommentForm.limit = this.cacheLimit
        } else if (dataType === 1) {
          searchBlogCommentForm.page = 1
          searchBlogCommentForm.limit = this.blogCommentSize
        } else {
          searchBlogCommentForm.page = 1
          searchBlogCommentForm.limit = 1
        }
        // 清空错误提示
        this.errorMessage = undefined
      },
      /**
       * 校验导出页码和页大小输入框值
       * @param {string} field   校验的属性[page-页码 limit-页大小]
       * @param {string} message 错误提示信息
       */
      checkInputValueHandle(field, message) {
        let searchBlogCommentForm = this.searchBlogCommentForm
        let value = searchBlogCommentForm[field]
        if (typeof value !== 'number') {
          this.errorMessage = message
          return
        }
        let page = searchBlogCommentForm.page
        let limit = searchBlogCommentForm.limit
        let total = page * limit
        if (total > this.blogCommentSize) {
          this.errorMessage = '导出数据大于已有数据'
        } else {
          this.errorMessage = undefined
        }
      },
      /**
       * 导出博客评论列表事件
       */
      downloadBlogCommentHandle() {
        let commentForm = this.commentForm
        if (commentForm.fields.length === 0) {
          this.notify('info', '温馨提示', '请选择需要导出的字段')
          return
        }
        if (!!this.errorMessage) {
          this.notify('info', '温馨提示', this.errorMessage)
          return;
        }
        let commentVo = {
          // 导出的字段列表
          fields: commentForm.fields.sort((a, b) => a.sort - b.sort).map(field => field.value),
          // 数据导出模式[0-异步 1-同步]
          downloadMode: commentForm.downloadMode,
          // 导出的文件类型[0-xlsx 1-csv 2-xls 3-txt]
          fileType: commentForm.fileType,
          // 导出的数据类型[0-当前页数据 1-全部数据 2-自选数据页]
          dataType: commentForm.dataType,
          // 查询参数（json数据格式）
          params: JSON.stringify(this.searchBlogCommentForm)
        }
        // console.log('评论导出表单对象：', commentVo)
        this.$confirm('您确定要导出博客评论列表, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          // 设置接口返回的数据格式
          let responseType = commentForm.downloadMode === 0 ? 'json' : 'blob'

          this.$axios.$post('/common/export-task/comment/list', commentVo, { responseType })
            .then(data => {
              if (data instanceof Blob) {
                /*
                  1、请求失败
                 */
                let reader = new FileReader()
                // 成功回调
                reader.onload = res => {
                  // 得到字符串
                  let { result } = res.target
                  // 解析成json对象
                  let data = JSON.parse(result)
                  // console.log('data', data)
                  this.notify('warning', '温馨提示', data.msg)
                }
                // 按照utf-8编码解析
                reader.readAsText(data, 'utf-8')
                return
              }
              /*
              2、请求成功
             */
              let message;
              if (commentForm.downloadMode === 0) {
                /*
                  异步下载
                 */
                message = '博客评论下载请求提交成功，博客下载页面进行数据下载'
              } else {
                /*
                  同步下载
                 */
                // 创建一个a标签的dom元素
                let downloadElement = document.createElement('a');
                // 创建文件下载的链接
                let href = window.URL.createObjectURL(data.data);
                // 设置下载连接
                downloadElement.href = href;
                // 下载的文件名
                downloadElement.download = decodeURI(data.fileName);
                // 页面添加dom元素
                document.body.appendChild(downloadElement);
                // 点击下载
                downloadElement.click();
                //下载完成移除dom元素
                document.body.removeChild(downloadElement);
                //释放掉文件下载的链接对象
                window.URL.revokeObjectURL(href);

                message = '博客评论下载成功，请查阅下载的文件'
              }
              this.notify('success', '操作成功', message)

            })
            .catch(() => {})

        }).catch(() => {});
      },
      // 弹出框关闭处理事件
      closeHandle() {
        // 重置博客评论导出表单对象
        let commentForm = this.commentForm
        commentForm.fields = []
        commentForm.downloadMode = 0
        commentForm.fileType = 0
        commentForm.dataType = 0
        commentForm.params = undefined

        // 重置博客评论检索表单对象
        this.searchBlogCommentForm = {
          blogId: '',
          // 检索的评论内容（模糊检索）
          word: '',
          // 评论区块id（全值匹配）
          blockId: '',
          // 是否查询一级评论[0-是]
          parentUserId: '',
          // 评论是否被删除[0-正常 1-删除]
          deleteFlag: '',
          // 评论是否被被隐藏[0-正常 1-隐藏]
          hideFlag: '',
          // 作者是否点赞[0-点赞 1-正常]
          authorLike: '',
          // 评论是否置顶[0-置顶 1-正常]
          topFlag: '',
          // 博客列表分页页码
          page: 1,
          // 博客列表每页大小
          limit: 10,
          // 排序字段
          field: 'createTime',
          // 排序方式
          order: 'ascending'
        }

        this.blogCommentSize = 0
        this.cachePage = undefined
        this.cacheLimit = undefined

        this.checkAll = true
        this.isIndeterminate = false
        this.errorMessage = undefined

        // 向上传递事件
        this.$emit('close-comment-dialog')
      },
    },
  }
</script>

<!--
  css字符对应
-->
<style>
  .w15 {
    width: 17%;
  }
  .ml10 {
    margin-left: 10px;
  }
  .mt10 {
    margin-top: 5px;
  }
  .mr20 {
    margin-right: 20px !important;
  }
</style>
